import React from 'react'
import {connect} from "react-redux"
import {withRouter} from 'react-router-dom';
import {DetailWrapper,Header,Content,Follow}from './style'
import {actionCreators} from './store'
class Detail extends React.PureComponent{
    render(){
        //参数传递路由
        /*console.log(this.props.location.search);*/
        // 动态路由
        console.log(this.props.match.params.id);
        return(
            <DetailWrapper>
                <Header>{this.props.title}</Header>
                {/*dangerouslySetInnerHTML能防止html被转义*/}
                <Content dangerouslySetInnerHTML={{__html:this.props.content}}/>
                <Follow>
                    <span>小礼物走一走，来简书关注我</span>
                    <div className="btn">赞赏支持</div>
                </Follow>
            </DetailWrapper>
        )
    }
    componentDidMount() {
        //参数传递路由
        /*this.props.getDetail(this.props.location.search.split('=')[1]);*/
       // 动态路由
        this.props.getDetail(this.props.match.params.id);
    }
}
const mapState=(state)=>({
    title:state.getIn(['detail','title']),
    content:state.getIn(['detail','content'])
});
const mapDispatch=(dispatch)=>({
        getDetail(id){
        dispatch(actionCreators.getDetail(id))
        }
});
//使Detail有能力获得Router中的所有参数和内容
export default connect(mapState,mapDispatch)(withRouter(Detail))
